<template>
  <el-dialog title="维护范围值" :before-close="close" :modal='true' :append-to-body='true' :visible.sync="show" width="25%"  @close="close">
    <div><span style="color:red">*</span> 在原有范围值上修改将会直接更新架构中所引用的范围值</div>
    <div ref="Dform" style="overflow-y:scroll;overflow-x:hidden;height:400px">
        <el-form :model="hierarchyRange" ref="form" size="small" label-width="140px"  status-icon inline-message >
        <el-form-item  label="层级">
          <el-input v-model="hierarchy.nodeName" type="text" :disabled="true" class="grayBack"></el-input>
        </el-form-item>
        <el-row v-for="(row,rowIndex) of hierarchyRange.hierarchyRangeList" :key="'level'+rowIndex">
          <el-form-item  :label="'范围值'+(rowIndex+1)" :prop="'hierarchyRangeList.'+rowIndex+'.rangeValue'" :rules="{ required: true, message: '请填写该字段', trigger: 'blur' }">
              <el-input  v-model="row.rangeValue" type="text" placeholder="请输入范围值"></el-input>
          </el-form-item>
          <el-button size="mini" type="danger" style="margin-right:5px" @click="delHierarchyRange(rowIndex)">
              <img src="/static/img/16/delete.png" style="vertical-align: text-bottom;"/>
              移除
          </el-button>
        </el-row>
        </el-form>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:flex-end">
    <el-button style=" margin-top: 5px; margin-bottom: 10px;" @click="addHierarchyRange">
        <img src="/static/img/16/add.png" style="vertical-align: text-bottom"/>
        添加范围值
    </el-button>
    <el-button style=" margin-top: 5px; margin-bottom: 10px;" type="primary" @click="submit">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import http from '@/api/http'
  import {Message} from 'element-ui'
    export default {
        name:'OrgPlanRangeEdit',
        props:{
            hierarchy:Object
        },
        data() {
            return{
                show: this.hierarchy !== null,
                hierarchyRange: {hierarchyRangeList: []}
            }
        },
        methods:{
            close() {
                this.show = false
                this.$emit("rangeEditShow",null)
            },
            addHierarchyRange() {
                var that = this
                var hierarchyRange = {
                  pkid: null,
                  rangeValue: '',
                  fkPlan: this.hierarchy.fkPlan,
                  fkPlanHierarchy: this.hierarchy.pkid
                }
                this.hierarchyRange.hierarchyRangeList.push(hierarchyRange);
                that.$nextTick(function(){
                    that.$refs.Dform.scrollTop = that.$refs.Dform.scrollHeight;
                });
                
            },
            delHierarchyRange(rowIndex) {
                this.hierarchyRange.hierarchyRangeList.splice(rowIndex,1)
            },
            /**新增架构主数据接口 */
            submit () {
              this.$refs.form.validate((valid) => {
                if (valid) {
                    http.post(this.$api.API_ORG_ORGPLAN_EDITHIERARCHYRANGE,{hierarchyRangeList: JSON.stringify(this.hierarchyRange.hierarchyRangeList)})
                        .then(resp=>{
                        this.show = false
                        Message({type: 'success', message: '保存成功'})
                        this.close()
                    })
                } else {
                  this.$message.error('缺少字段')
                  return false;
                }
              });
            },
            /**查询层级范围值列表 */
            findOrgPlanHierarchyRangeList () {
              if (this.hierarchy.pkid !== undefined){
                http.get(this.$api.API_ORG_ORGPLAN_FINDORGPLANHIERARCHYLRANGEIST,{fkPlanHierarchy:this.hierarchy.pkid})
                  .then(resp=>{
                    this.hierarchyRange.hierarchyRangeList = resp.list
                })
              }
            }
        },
        created(){
          this.findOrgPlanHierarchyRangeList()
        }
    }
</script>

<style lang="less" scoped>
.main-label{
    border: #ccc 1px solid;
    border-bottom: 0;
    height: 36px;
    line-height: 35px;
    font-weight: bold;
    padding-left: 5px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    min-height: 36px;
  }
  .head-btn{
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    vertical-align: center;
    font: 8px/8px HelveticaNeue, Arial;
    padding: 0px 11px;
    border: 1px solid #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9pt;
    margin-left: 2px;
    line-height: 25px;
    color: #000;
    outline: none;
    background-image: url(../../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
  &:hover {
     color: #FFF;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc');
     border: 1px solid #d51900;
     background: linear-gradient(top, #d51900, #d51900);
     background: -moz-linear-gradient(top, #d51900, #d51900);
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d51900), to(#d51900));
     text-shadow: -1px -1px 1px #1c6a9e;
   }
  /deep/span{
    display: block;
  }
  }

  /deep/.el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 50px;
    position: absolute;
    padding: 0 5px !important;
    top: 0;
    left: 0;
  }
  /deep/.el-form-item {
    margin-bottom: 0px;
  }

  .el-row{
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    .el-col:first-child{
      border-right: 1px solid #eee;
    }
    .grayBack{
      /deep/input,/deep/textarea{
        background: #f2f2f2;
      }
    }
  }

  /deep/.el-form-item__label {
    font-size: 12px;
  }
  /deep/.el-radio-button__inner {
    border-left: 1px solid #DCDFE6;
    font-weight: 600;
  }
  /deep/.el-input.is-disabled .el-input__inner {
    color: #606266;
  }
  /deep/.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 0! important;
    display: flex;
    width: 100%;
    padding: 5px;
  }
  /deep/.el-form-item--small .el-form-item__label {
    padding: 0;
    margin-right: 5px;
    background: #f1f1f1;
    border: 1px solid #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /deep/.el-form-item--small .el-form-item__content {
    padding: 10px 10px;
    border: 1px solid #e7e7e7;
    align-items: center;
    height: 100%;
    flex-wrap: wrap;
    flex: 1;
    margin-left: 0px !important;
  }

  .info-label{
    padding: 10px 20px 10px 20px;
    display: inline-block;
    background-color: #d51900;
    margin-left: 5px;
    color: white;
    font-weight: bold;
  }
</style>